<template>
  <div class="c">
    <p>AAAA</p>
    <p>子给夫传递数据，操作父组件数据，子触发事件</p>
    <p>{{ count }}</p>

    <C @add="add" />
    <br />
    <!--  -->
    
    <p>{{ person.age }}</p>
    <br />
  </div>
</template>

<script>
import C from "./C.vue";
export default {
  name: "A",

  data() {
    return {
      count: 0,
      person: {
        name: "zs",
        age: 20,
      },
    };
  },
  mounted() {
    this.$bus.$on("update", this.update);
  },
  beforeDestroy() {
    this.$bus.$off("update", this.update);
  },
  methods: {
    add() {
      this.count++;
    },
    update() {
      this.person.age++;
    },
  },
  components: {
    C,
  },
};
</script>

<style scoped>
.c {
  width: 300px;
  height: 300px;
  background-color: pink;
}
</style>